import React, { useEffect, useState } from "react";
import instance from "./utils/request";
const getChannelsAPI = () => {
  return instance({
    url: '/v1_0/channels'

  })
}
export default function App() {
  const [count, setCount] = useState(0)
  const [isShow, setIsShow] = useState(false)
  const [info, setInfo] = useState({ age: 22, gender: 1 })
  useEffect(() => {
    document.title = count
  }, [])
  useEffect(() => {
    console.log(9, info.age);
    console.log(10, info.gender);
  }, [info])
  return (<>
    <h4>{count}</h4>
    <button onClick={() => setCount(count + 1)}>+1</button>
    <hr />
    <h4>{info.age}</h4>
    <h4>{info.gender}</h4>
    <button onClick={() => {
      const val = info.age + 1
      return setInfo({ ...info, age: val })
    }}>age+1</button>
    <button onClick={() => {
      const val = info.gender + 1
      return setInfo({ ...info, gender: val })
    }}>gender+1</button>
    <hr />
    <button onClick={() => setIsShow(!isShow)}>显示/隐藏</button>
    {isShow ? <Card></Card> : null}
    <Channels></Channels>
  </>)
}
function Card() {
  const fn = () => {
    console.log('chufa');
  }
  useEffect(() => {
    console.log('挂载时');
    window.addEventListener('resize', fn)
  }, [])
  useEffect(() => {
    return () => {
      console.log('卸载时');
      window.removeEventListener('resize', fn)
    }
  }, [])
  return <div>
    卡片
  </div>
}
function Channels() {
  const [channelsList, setChannelsList] = useState([])
  useEffect(() => {
    const request = async () => {
      const res = await getChannelsAPI()
      console.log(res);
      setChannelsList(res.data.channels)
    }
    request()
  }, [])
  return <ul>
    {channelsList.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
}